<template>
  <TemplateTable ref="templateTableRef" :data="tableData" :columns="tableColumns" :loading="loading"
    :height="tableHeight" checkbox :show-pagination="false" border="none" size="small" stripex>
  </TemplateTable>

  <EditDialog ref="editDialogRef" v-if="editDialogDisplay" @submit="editSuccess"
    @cancel="editDialogDisplay = false" />

  <BatchEditDialog ref="batchEditDialogRef" v-if="batchEditDialogDisplay" @submit="editSuccess"
    @cancel="batchEditDialogDisplay = false" />
</template>

<script setup>
import { ref, getCurrentInstance, nextTick, computed, onMounted } from 'vue'
import { Message } from 'view-ui-plus'
import moment from 'moment'
import { metadata } from '@/api/modules/modelSetting'
import { DATA_VAD_OPTIONS } from '@/util/conf'

import EditDialog from './components/EditDialog.vue'
import BatchEditDialog from './components/BatchEditDialog.vue'

const props = defineProps({
  tableHeight: [String, Number],
  currentMetaData: {
    type: Object
  }
})

// 当前对象
const { proxy } = getCurrentInstance()

const editDialogDisplay = ref(false)
const batchEditDialogDisplay = ref(false)
// 是否显示对话框
const templateTableRef = ref(null)
const editDialogRef = ref(null)
const batchEditDialogRef = ref(null)

const loading = ref(false)
const tableData = ref([])

const tableColumns = computed(() => [
  { title: '标题', field: 'name', minWidth: 200 },
  {
    title: '字段',
    field: 'fieldname',
    minWidth: 300,
    formatter: ({ row }) => {
      return `${row.fieldname} (${row.datatypename})`
    }
  },
  { title: '排序', field: 'sortindex', minWidth: 80 },
  {
    title: '校验',
    field: 'defaultvaluetitle',
    minWidth: 240,
    formatter: ({ row }) => {
      if (!row?.defaultvaluetitle) return ''

      return DATA_VAD_OPTIONS.reduce((pre, cur) => {
        return row.defaultvaluetitle.includes(cur.value) ? `${pre},${cur.label}` : pre
      }, '').replace(',', '')
    }
  },
  { title: '长度', field: 'length', minWidth: 80 },
  { title: '关联', field: 'reffk', icon: true, minWidth: 80 },
  { title: '生成ID', field: 'pk', icon: true, minWidth: 80 },
  { title: '多值', field: 'modits', icon: true, minWidth: 80 },
  { title: '启用字典', field: 'seldata', icon: true, minWidth: 100 },
  { title: '禁用导入导出', field: 'impfield', icon: true, minWidth: 100 },
  { title: '流程变量', field: 'systemfield', icon: true, minWidth: 100 },
  { title: '显示位置', field: 'viewtype', minWidth: 180 },
  {
    title: '操作',
    type: 'action',
    width: 140,
    fixed: 'right',
    actions: [
      {
        text: '编辑',
        type: 'edit',
        onClick: row => handleEdit(row)
      },
      {
        text: '删除',
        type: 'del',
        onClick: row => handleDelete(row)
      }
    ]
  }
])

const getPageData = () => {
  loading.value = true

  metadata.tableProperties({
    data: {
      id: props.currentMetaData.id
    }
  })
    .then(({ data }) => {
      tableData.value = data || []
    })
    .finally(() => {
      loading.value = false
    })
}

const editSuccess = () => {
  editDialogDisplay.value = false
  batchEditDialogDisplay.value = false
  getPageData()
}

const handleEdit = row => {
  editDialogDisplay.value = true
  nextTick(() => {
    editDialogRef.value.initDialog(row.id)
  })
}

const handleDelete = row => {
  proxy.$Modal.confirm({
    mask: false,
    title: '警告',
    content: '<p>是否删除该数据?</p>',
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      await metadata.propertiesDelete({
        data: {
          id: row.id
        }
      })
      Message.success('删除成功')
      getPageData(true)
    }
  })
}

const handleBatchEdit = () => {
  const list = templateTableRef.value.getCheckboxRecords()

  if (!list.length) return Message.error('请选择需要修改的数据')

  batchEditDialogDisplay.value = true
  nextTick(() => {
    batchEditDialogRef.value.initDialog(list.map(item => item.id))
  })
}

const handleBatdelete = () => {
  const list = templateTableRef.value.getCheckboxRecords()
  if (!list.length) return Message.error('请选择需要删除的数据')

  proxy.$Modal.confirm({
    mask: false,
    title: '警告',
    content: '<p>是否批量删除数据?</p>',
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      await metadata.propertiesBatdelete({
        query: {
          ids: list.map(item => item.id)
        }
      })
      Message.success('删除成功')
      getPageData(true)
    }
  })
}

const handleSync = () => {
  proxy.$Modal.confirm({
    mask: false,
    title: '警告',
    content: `<p>同步${props.currentMetaData.name}数据表结构，请确认是否继续操作?</p>`,
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      await metadata.tableSync({
        data: {
          id: props.currentMetaData.id
        }
      })
      Message.success('同步成功')
      getPageData(true)
    }
  })
}

defineExpose({
  handleBatchEdit,
  handleBatdelete,
  handleSync
})

onMounted(()=>{
  getPageData()
})
</script>

<style>
</style>